<template>
    <div class="box">
      <div class="nav-box">
        <a-breadcrumb>
          <a-breadcrumb-item>
            <span class="breadcrumb-link">{{$store.state.BreadcrumbTitle}}</span>
          </a-breadcrumb-item>
          <span slot="separator">
            <a-icon style="color: #acacac;font-size: 12px" type="right" />
          </span>
          <a-breadcrumb-item>店铺</a-breadcrumb-item>
  <!--          <span slot="separator">-->
  <!--            <a-icon style="color: #acacac;font-size: 12px" type="right" />-->
  <!--          </span>-->
          <a-breadcrumb-item>{{dataObj.shop_name}}</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="shop-name-box">
        <div class="shop-left">
          <div class="shop-left-top">
            <div class="shop-left-top-img">
              <img :src="dataObj.shop_logo" alt="">
            </div>
            <div class="shop-left-top-content">
              <p>
                <span>{{dataObj.shop_name}}</span>
              </p>
              <p>
                <span>{{dataObj.quantity_on_sale}}</span>
                <span>件在售商品</span>
                <span>已售</span>
                <span>{{dataObj.quantity_sold}}</span>
                <span>件</span>
              </p>
            </div>
          </div>
          <div class="shop-left-center">
            {{dataObj.shop_information}}
          </div>
          <div class="shop-left-bottom">
            <a-icon type="environment" />
            {{dataObj.mch_address}}
          </div>
        </div>
        <div class="shop-right">
          <div class="shop-right-favorites">
            <div class="shop-right-favorites-btn" @click="handleCollectShopClick">
              <a-icon v-if="dataObj.collection_status === 0" type="heart" />
              <span v-if="dataObj.collection_status === 0">收藏</span>
              <span v-if="dataObj.collection_status > 0">已收藏</span>
            </div>
          </div>
          <div class="shop-right-centent">已有
            <span>{{dataObj.collection_num}} </span>
            人收藏店铺
          </div>
          <div class="shop-right-bottom" @click="handleSeeShopClick">查看门店信息
            <a-icon type="right" />
          </div>
        </div>
      </div>
      <div class="carousel-cox" v-if="isBanner">
        <a-carousel arrows autoplay>
          <div
            slot="prevArrow"
            class="custom-slick-arrow"
            style="left: 10px;zIndex: 99"
          >
            <a-icon type="left-circle" />
          </div>
          <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
            <a-icon type="right-circle" />
          </div>
          <div v-for="item in dataObj.banner" :key="item.id">
            <img :src="item.image" alt="">
          </div>
        </a-carousel>
      </div>
      <div class="shop-name-box-empty" v-else></div>
      <div class="shop-recommend-box">
        <div class="title-box">店家推荐</div>
        <div class="recommend-list">
            <ul>
              <li v-for="item in dataObj.recommend_list" :key="item.id" @click="handleClickProduct(item)">
                <div class="img-box">
                  <img :src="item.imgurl" alt="">
                </div>
                <div class="product-title">
                  <p>{{item.product_title}}</p>
                  <p>
                    <span>￥{{item.price}}</span>
                  </p>
                </div>
              </li>
            </ul>
          </div>
      </div>
      <div class="all-product-title">全部商品</div>
      <all-pruoduct></all-pruoduct>
    </div>
</template>

<script>
import api from '@/api/shop/api'
import AllPruoduct from './goodlist'
import mixin from '@/assets/js/scrollTop'
import Event from '@/assets/js/event'
export default {
  name: 'coupon',
  mixins: [mixin],
  data () {
    return {
      dataObj: {},
      isBanner: false
      // formData: {
      //   cid: null,
      //   keyword: null,
      //   class_id: null,
      //   amount: null,
      //   sort_type: null,
      //   sort: null,
      //   current: 1
      // }
    }
  },
  components: {
    AllPruoduct
  },
  mounted () {
    Event.$on('getDataObj', (obj) => {
      this.dataObj = obj
      if (obj.banner.length > 0) {
        this.isBanner = true
      } else {
        this.isBanner = false
      }
    })
  },
  beforeDestroy () {
    Event.$off('getDataObj', (obj) => {
      this.dataObj = obj
      if (obj.banner.length > 0) {
        this.isBanner = true
      } else {
        this.isBanner = false
      }
    })
  },
  methods: {
    handleClickProduct (item) {
      console.log(item)
      console.log(this.dataObj.shop_name)
      this.$store.commit('changePage', 'ProductDetails')
      this.$store.commit('sendProductDetails', { products: item, title: this.dataObj.shop_name })
      Event.$emit('toProduct', () => {
        this.comp = 'product'
      })
      this.scrolltotop()
    },
    handleSeeShopClick () {
      this.$message.success('敬请期待！')
    },
    handleCollectShopClick () { // 收藏 / 取消收藏 店铺
      const params = {
        module: 'app_pc',
        action: 'mch',
        m: 'collection_shop',
        access_id: localStorage.getItem('token'),
        shop_id: this.$store.state.ShopId.mch_id,
        language: null
      }
      api.changeFavorite(params).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          Event.$emit('getMenuList')
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.error(err)
      })
    }
    // getShopList (id) {
    //   const params = {
    //     module: 'app_pc',
    //     action: 'mch',
    //     m: 'store_homepage',
    //     access_id: localStorage.getItem('token'),
    //     shop_id: id,
    //     cid: this.formData.cid,
    //     keyword: this.formData.keyword,
    //     class_id: this.formData.class_id,
    //     amount: this.formData.amount,
    //     sort_type: this.formData.sort_type,
    //     sort: this.formData.sort,
    //     page: this.formData.current,
    //     language: null
    //   }
    //   api.getShopList(params).then(res => {
    //     if (res.data.code === 200) {
    //       this.dataObj = res.data.data
    //       console.log(res.data.data)
    //     } else {
    //       this.$message.error(res.data.message)
    //     }
    //   })
    // }
  }
}
</script>

<style scoped lang="scss">
  ::v-deep .ant-carousel .slick-slide {
    text-align: center;
    line-height: 300px;
    background: rgba(211, 211, 211, 0.73);
    overflow: hidden;
    position: relative;
  }

  ::v-deep .ant-carousel .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
  }
  ::v-deep .ant-carousel .custom-slick-arrow:before {
    display: none;
  }
  ::v-deep .ant-carousel .custom-slick-arrow:hover {
    opacity: 0.5;
  }

  ::v-deep .ant-carousel .slick-slide img {
    width: 100%;
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
.box {
  max-width: 1310px;
  min-width: 780px;
  margin: 0 auto;
  padding-left: 10px;
  /*background-color: #98ffee;*/
  .nav-box {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    /*background-color: #62ffe1;*/
    .breadcrumb-link {
      color: #606266!important;
    }
  }
  .carousel-cox {
    width: 100%;
    height: 300px;
    /*background-color: #924bff;*/
  }
  .shop-name-box {
    width: 100%;
    height: 242px;
    padding: 25px;
    margin-bottom: 15px;
    background-color: rgba(233, 233, 233, 0.61);
    .shop-left {
      min-width: 400px;
      height: 100%;
      float: left;
      /*background-color: #e0ffcf;*/
      .shop-left-top {
        width: 100%;
        height: 68px;
        /*background-color: #ffe367;*/
        .shop-left-top-img {
          width: 68px;
          height: 68px;
          float: left;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .shop-left-top-content {
          width: calc(100% - 70px);
          height: 68px;
          padding-left: 10px;
          float: right;
          p {
            &:nth-child(1) {
              span {
                color: #020202;
                font-weight: bold;
              }
            }
            &:nth-child(2) {
              span {
                &:nth-child(1) {
                  color: #d4282d;
                  margin-right: 2px;
                }
                &:nth-child(2) {
                  padding: 0 5px;
                  border-right: 2px solid #c6c6c6;
                  margin-right: 4px;
                }
                &:nth-child(3) {
                  margin-right: 5px;
                }
                &:nth-child(4) {
                  color: #d4282d;
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }
      .shop-left-center {
        width: 100%;
        height: 105px;
        line-height: 105px;
      }
    }
    .shop-right {
      min-width: 200px;
      height: 100%;
      float: right;
      /*background-color: #e0ffcf;*/
      .shop-right-favorites {
        width: 100%;
        height: 40px;
        /*background-color: #86ffa8;*/
        .shop-right-favorites-btn{
          width: 80px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 30px;
          cursor: pointer;
          float: right;
          background-color: #de282d;
          transition: all 0.15s ease;
          color: #fff;
          &:hover {
            background-color: rgba(222, 40, 45, 0.62);
          }
          span {
            margin-left: 5px;
          }
        }
      }
      .shop-right-centent {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: right;
        span {
          color: #d4282d;
        }
      }
      .shop-right-bottom {
        width: 100%;
        text-align: right;
        color: #d4282d;
        margin-top: 103px;
        cursor: pointer;
      }
    }
  }
  .shop-recommend-box {
    width: 100%;
    margin-top: 15px;
    .title-box {
      width: 100%;
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      color: #020202;
      font-weight: bold;
      /*background-color: #ccff27;*/
    }
    .recommend-list {
      width: 100%;
      min-height: 380px;
      margin-bottom: 10px;
      /*background-color: #bdff28;*/
      ul {
        width: 100%;
        height: 100%;
        li {
          width: 317.5px;
          height: 100%;
          overflow: hidden;
          display: inline-block;
          /*background-color: #0dffb1;*/
          margin-right: 10px;
          border: 1px solid #EEEEEE;
          cursor: pointer;
          &:last-child {
            margin: 0;
          }
          &:hover {
            box-shadow: rgb(228, 228, 228) 0px 0px 5px 2px;
          }
          .img-box {
            width: 100%;
            height: 302px;
            /*background-color: #ff290e;*/
            img {
              width: 100%;
              height: 100%;
            }
          }
          .product-title {
            width: 100%;
            height: 75px;
            /*background-color: #afff2d;*/
            p {
              width: 100%;
              text-align: center;
              &:first-child {
                padding: 0 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-weight: bold;
                color: #020202;
                font-size: 14px;
                margin: 20px 0 13px 0;
              }
              span {
                font-size: 16px;
                &:first-child {
                  margin-right: 5px;
                  color: #D4282D;
                  vertical-align: middle;
                }
              }
            }
          }
        }
      }
    }
  }
  .all-product-title {
    width: 100%;
    height: 51px;
    line-height: 51px;
    font-weight: bold;
    font-size: 14px;
    padding-left: 19px;
    color: #020202;
    background-color: rgba(211, 211, 211, 0.32);
  }
}
</style>
